#include("../common/_layout.html")
#include("../common/_navbar.html")
#@layout()

#define content()
	#@navbar("stage")
	<div class="container mainContainer">
		<div class="card">
		  <div class="card-header">敌方</div>
		  <div class="card-block">
		  <table class="table table-hover" id="enemyUnits">
		  </table>
		  </div>
		</div>
		
		<div class="card">
		  <div class="card-header">我方</div>
          <div class="card-block">
		  <table class="table table-hover" id="friendUnits">
		  </table>
          </div>
		</div>
		
		<div class="card">
		  <div class="card-header">指令</div>
          <div class="card-block">
		  <div class="panel-body" id="commandCards"></div>
          </div>
		</div>
		
		<div class="card">
		  <div class="card-header">战斗记录</div>
          <div class="card-block">
		  <div class="panel-body" id="battleLog"></div>
          </div>
		</div>
	</div>
	<script type="text/javascript">
		var enemyUnits = null;
		var friendUnits = null;
		var commandCards = null;
		var selectedCards = [null,null,null];
		var indexShow = ["①","②","③"];
		
		$(function(){
			updateAllInfo(true);
		});
		
		function updateAllInfo(refreshCard) {
			getEnemiesInfo();
			if(refreshCard){
				getFriendsInfo(getCardsInfo);
			}else{
				getFriendsInfo();
			}
		}
		
		function getEnemiesInfo() {
			$.post("#(homeurl ??)/battle/getEnemiesInfo",function(data){
				$("#enemyUnits tr").remove();
				enemyUnits = data;
				for(var i=0;i<data.length;i++){
					$("#enemyUnits").append(createEnemyRow(data[i]));
				}
			},"json");
		}
		
		function getFriendsInfo(callback) {
			$.post("#(homeurl ??)/battle/getFriendsInfo",function(data){
				$("#friendUnits tr").remove();
				friendUnits = data;
				for(var i=0;i<data.length;i++){
					$("#friendUnits").append(createFriendRow(data[i]));
				}
				if(callback!=null){
					callback();
				}
			},"json");
		}
		
		function getCardsInfo() {
			$.post("#(homeurl ??)/battle/getCardsInfo",function(data){
				$("#commandCards button").remove();
				commandCards = data;
				for(var i=0;i<data.length;i++){
					$("#commandCards").append(createCardsButton(data[i], i));
				}
			},"json");
		}
		
		function createEnemyRow(data) {
			var cardInfo = SERVENT_DB[data.sid];
			var row = "<tr id=\"enemy_1\">";
			row += "<td>"+cardInfo.name+"</td>";
			row += "<td>Lv."+data.level+"</td>";
			row += "<td>"+CLASS_DB[data.type]+"</td>";
			row += "<td>"+data.hp+"/"+data.maxhp+"</td>";
			row += "<td>"+data.np+"/"+data.maxnp+"</td>";
			row += "</tr>";
			return row;
		}
		
		function createFriendRow(data) {
			var cardInfo = SERVENT_DB[data.sid];
			var row = "<tr id=\"friend_1\">";
			row += "<td>"+cardInfo.name+"</td>";
			row += "<td>Lv."+data.level+"</td>";
			row += "<td>"+CLASS_DB[data.type]+"</td>";
			row += "<td>"+data.hp+"/"+data.maxhp+"</td>";
			row += "<td>"+data.np+"%</td>";
			row += "</tr>";
			return row;
		}
		
		function createCardsButton(data, index) {
			var friend = friendUnits[data.unitIndex];
			var friendInfo = SERVENT_DB[friend.sid];
			var btn = "<button type=\"button\" class=\"btn btn-lg "+btnColor(data.type)+"\" id=\"card_"+index+"\" onclick=\"cardSelect(this)\">";
			btn += friendInfo.name;
			btn += "</button>";
			return btn;
		}
		
		function btnColor(type){
			switch(type){
				case 1:
					return "btn-danger";
				case 2:
					return "btn-primary";
				case 3:
					return "btn-success";
				default:
					return "btn-default";
			}
		}
		
		function cardSelect(btn) {
			var index = $(btn).attr("id").split("_")[1];
			if($(btn).hasClass("active")){
				$(btn).removeClass("active");
				for(var i=0;i<selectedCards.length;i++){
					if(selectedCards[i]==index){
						selectedCards[i]=null;
						$(btn).html($(btn).html().substr(1));
						break;
					}
				}
			}else{
				$(btn).addClass("active");
				for(var i=0;i<selectedCards.length;i++){
					if(selectedCards[i]==null){
						selectedCards[i]=index;
						$(btn).html(indexShow[i]+$(btn).html());
						break;
					}
				}
				var selectOK = true;
				for(var i=0;i<selectedCards.length;i++){
					if(selectedCards[i]==null){
						selectOK = false;
						break;
					}
				}
				if(selectOK){
					$("#commandCards button").attr("disabled","disabled");
					sendCommand();
				}
			}
		}
		
		function sendCommand() {
			$.post("#(homeurl ??)/battle/run",{"selectCards":selectedCards.join(",")},function(data){
				var isEndBattle = false;
				for(var i=0;i<data.length;i++){
					if(data[i].log=="win"){
						isEndBattle = true;
					}else{					
						var friend = friendUnits[data[i].from];
						var friendInfo = SERVENT_DB[friend.sid];
						var enemy = enemyUnits[data[i].to];
						var enemyInfo = SERVENT_DB[enemy.sid];
						var div = "<div>"+friendInfo.name+" 对 "+enemyInfo.name+" 造成了 "+data[i].log+" 点伤害</div>";
						$("#battleLog").prepend(div);
					}
				}
				updateAllInfo(!isEndBattle);
				selectedCards = [null,null,null];
				if(isEndBattle){
					createEndBattleButton();
				}
			},"json");
		}
		
		function createEndBattleButton() {
			$("#commandCards button").remove();
			$("#commandCards").append("<button class=\"btn btn-lg\" onclick=\"endBattle()\">战斗结束</button>");
		}
		
		function endBattle() {
			$.post("#(homeurl ??)/battle/endBattle",function(data){
				location = "#(homeurl ??)/stage";
			});
		}
	</script>
	<script src="#(homeurl ??)/js/db.js"></script>
#end

#define css()
<style type="text/css">
.mainContainer {
	margin-top:25px;
}
.card {
    margin-top:10px;
}
#battleLog {
    margin-bottom:1rem;
}
#commandCards .btn {
    margin: 5px;
}
</style>
#end